import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/utils/category_item.dart';
import 'package:flutter_demo/widget/product_item.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';

import '../../i18n/locale_keys.dart';
import '../../style/radius.dart';
import '../../style/space.dart';
import '../../widget/appbar.dart';
import '../../widget/placehold.dart';
import 'category_logic.dart';

class CategoryPage extends GetView<CategoryLogic> {
  CategoryPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetBuilder(builder: (_){
      return Scaffold(
        // 顶部导航
        appBar: mainAppBarWidget(
          titleString: LocaleKeys.gCategoryTitle.tr,
        ),
        // 内容
        body: SafeArea(
          child: _buildView(context),
        ),
      );
    },id: "category",
    init: CategoryLogic(),);
  }

  // 主视图
  Widget _buildView(BuildContext context) {
    return <Widget>[
      // 左侧导航
      _buildLeftNav(context),
      // 右侧商品列表
      // 右侧商品列表
      _buildProductList().expanded(),
    ].toRow();
  }


  Widget _buildLeftNav(BuildContext context){
    return GetBuilder<CategoryLogic>(builder: (_){
        return ListView.separated(
          itemBuilder: (context,index){
            var item = controller.categoryItems[index];
            return CategoryListItemWidget(
                category: item,
                selectId: controller.categoryId,
                onTap: controller.onCategoryTap,
            );
          },
          separatorBuilder: (context,index){
            return SizedBox(height: AppSpace.listRow.w); // 间距
          },
          itemCount: controller.categoryItems.length,
        ).width(100.w)
         .decorated(color: context.colors.scheme.surface,)
         .clipRRect(
          topRight: AppRadius.card.w,
          bottomRight: AppRadius.card.w,
        );
    },id: "left_nav",);
  }

  Widget _buildProductList(){
    return GetBuilder<CategoryLogic>(builder: (_){
       return SmartRefresher(
           controller: controller.refreshController,
           enablePullUp: true,
           onRefresh: controller.onRefresh,
           onLoading: controller.onLoading,
           child: controller.items.isEmpty ? const PlaceholdWidget() :
           GridView.builder(
             itemCount: controller.items.length,
             gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
             crossAxisCount: 2, // 每行2个
             mainAxisSpacing: AppSpace.listRow, // 主轴间距
             crossAxisSpacing: AppSpace.listItem, // 交叉轴间距
             childAspectRatio: 0.8, // 宽高比
           ), itemBuilder: (context,index){
              var product = controller.items[index];
              return ProductItemWidget(product,imgHeight: 117.w,) ;
           }).paddingHorizontal(AppSpace.listView),
       );
    },id: "product_list",);
  }
}
